<template lang="html">
    <div
      class="x-bar"
      :id="chartId"
      :option='option'
      >
      </div>
</template>

<script>
import {formatNum} from '../../util/tool'
export default {
  props : {
    chartId : {
      type : String,
    },
    title : {
      type : String,
    },
    options : {
      type : Array,
    }
  },
  data(){
    return {
      chart : '',
      option : {
          title : {
          text: '旅客来源分析',
          left: 'center',
          textStyle : {
              color: '#fff'
          }
      },
      tooltip : {
          trigger: 'item',
          formatter : function(param){
            if(param.componentSubType == "effectScatter" && param.name !== '江门'){
              return  param.name+' : '+ formatNum(param.value[2]);
            }
          }
      },
      geo: {
          map: 'china',
          label: {
              emphasis: {
                  show: false
              }
          },
          zoom : 1.2,
          roam: false,
          itemStyle: {
              normal: {
                  areaColor: '#071d6f',
                  borderColor: '#27ced4'
              },
              emphasis: {
                  areaColor: '#072e6f'
              }
          }
      },
      series: this.options
      }
    }
  },
  watch : {
    options: {
     handler(newVal, oldVal) {
      if (this.chart) {
       if (newVal) {
        this.chart.setOption(this.option);
       } else {
        this.chart.setOption(this.option);
       }
      } else {
        this.init();
      }
     },
     deep: true
  }
  },
  methods : {
    init() {
     this.chart = this.$echarts.init(document.getElementById(this.chartId));
     this.chart.setOption(this.option);
     window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted(){
    this.init();
  }
}
</script>

<style lang="scss" scoped>
  .x-bar {
    width: 100%;
    height: 100%;
  }
</style>
